<template>
    <div class="profile-collect">
        <div class="header">我的收藏</div>

        <div class="body">
            <div v-if="collectList && collectList.length" class="list">
                <div v-for="(item,index) in collectList" :key="index" class="item">
                    <CollectItem :item="item" />
                </div>
            </div>

            <div v-else class="none">暂无收藏~</div>
        </div>

        <div class="footer link">
            <div v-if="!showAll" @click="toCollectHome">查看全部</div>
        </div>
    </div>
</template>

<script>
import CollectItem from "./collectItem";
export default {
    components: {
        CollectItem
    },
    props: {
        showAll: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            collectList: []
        };
    },
    created() {
        this.getCollectList();
    },
    methods: {
        toSearchPage() {
            this.$router.push({
                path: "/search/index"
            });
        },

        toCollectHome() {
            this.$router.push({
                path: "/collect/index"
            });
        },

        async getCollectList() {
            const col = this.$cloud.database().collection("collect");
            const { data } = await col
                .orderBy("collectTimeStamp", "desc")
                .get();
            if (this.showAll === false) {
                this.collectList = data.slice(0, 4);
            } else {
                this.collectList = data;
            }
            console.log("收藏列表", data);
        }
    }
};
</script>


<style lang="less" scoped>
.profile-collect {
    margin-top: 30px;
    background: #f5f5f5;
    background: #fff;
    .header {
        padding: 30px 30px 0 30px;
        font-size: 30px;
        font-weight: 500;
    }

    .body {
        padding: 0 30px;

        .list {
            .item {
                border-bottom: 1px solid #eee;
            }
            .item:last-child {
                border: none;
            }
        }

        .none {
            text-align: center;
            padding: 30px 0 30px 0;
        }
    }

    .footer {
        text-align: center;
        padding-bottom: 30px;
    }
}
</style>